<template>
	<div class="model" v-if="isShow">
		<h2>已添加商品<span @click="close">&times;</span></h2>
		<ul class="content">
			<li v-for="(item,key) in goodsInfo" v-if="item.status === 1">
				<div class="desc">
					<strong>货号：</strong>{{item.commodity_no}}
				</div>
				<div class="operate">
					<el-button type="danger" size="mini" @click="remove(item.commodity_id)">移除</el-button>
				</div>
				<div class="commodity_name">
					<strong>商品名称：</strong>{{item.commodity_name}}
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: ["isShow"],
		methods: {
			close() {
				this.$emit("closeModel");
			},
			remove(val) {
				this.$store.commit({
					type: "saveGoods/set",
					commodity_id: val,
					status: 0
				});
				if (this.$parent.flag) {
					this.$parent.flag = 0;
				}
			}
			
		},
		computed: {
			goodsInfo() {
				return this.$store.state.saveGoods.goodsStatus;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.model {
		position: fixed;
		width: 600px;
		height: 500px;
		background: #fafafa;
		z-index: 999;
		border-radius: 15px;
		left: calc(50% - 300px);
		top: calc(50% - 250px);
		box-shadow: 0 0 10px #bbb;
		>h2 {
			padding: 1rem 2rem;
			border-bottom: 1px solid #ccc;
			display: flex;
			font-weight: normal;
			color: #555;
			span {
				margin-left: auto;
				cursor: pointer;
			}
			span:hover {
				color: #aaa;
			}
		}
	}
	.content {
		padding: 2rem;
		width: 100%;
		height: 400px;
		overflow-y: auto;
		font-size: 14px;
		color: #444;
		li {
			width:100%;
			padding: 1rem 0;
			font-size: 0;
			>div {
				font-size: 14px;
			}
			.desc {
				width: 80%;
				display: inline-block;
				padding-right:10%;
			}
			.operate {
				width: 10%;
				display: inline-block;
			}
			.commodity_name {
				width: 100%;
				display: block;
			}
		}
	}
	


	
</style>